import React, { useState, useEffect } from 'react';
import axios from 'axios';
import A from './Details.module.css';
import zhucun from '../../image/竹笋炒腊肉.png';

function Details() {
    const [foodname, setFoodname] = useState('土豆炖牛腩');
    const [foodimage, setFoodimage] = useState('');
    const [shoucang, setShoucang] = useState('');
    const [liulan, setLiulan] = useState('');
    const [gongyi, setGongyi] = useState('');
    const [kouwei, setKouwei] = useState('');
    const [time, setTime] = useState('');
    const [difficult, setDifficult] = useState('');
    const [cal, setCal] = useState('');
    const [mainmaterials, setMainmaterials] = useState([]);
    const [othermaterial, setOthermaterial] = useState([]);
    const [tips, setTips] = useState('');


    const [step,setStep] = useState([])
    const [stepImg,setSetpImg] = useState([])


    useEffect(() => {
        // 向后端发送请求，获取食谱详细信息
        const fetchRecipeDetails = async () => {
            try {
                const response = await axios.post('http://localhost:3001/own/searchdishsdetail', { foodname });
                if (response.data.success) {
                    const data = response.data.data;
                    // console.log(data)
                    setFoodimage(data.image);
                    // console.log(foodimage)
                    setShoucang(data.like);
                    setLiulan(data.look);
                    setGongyi(data.craft);
                    setKouwei(data.taste);
                    setTime(data.time);
                    setDifficult(data.level);
                    // setCal(data.cal);
                    setMainmaterials(data.mainMaterials);
                    // console.log(mainmaterials[0].main_name)
                    setOthermaterial(data.otherMaterials);
                    // console.log(othermaterial[0].others_name)
                    setTips(data.tips);
                } else {
                    console.error('未找到匹配的食谱');
                }
            } catch (error) {
                console.error('获取食谱详细信息时出错:', error);
            }
        };

        fetchRecipeDetails();
    }, [foodname]);

    useEffect(() => {
        // 向后端发送请求，获取食谱详细信息
        const fetchRecipeDetails = async () => {
            try {
                const response = await axios.post('http://localhost:3001/own/searchdishsstep', { foodname });
                if (response.data.success) {
                    const data = response.data.data;
                    console.log(data.step)
                    setStep(data.step)
                    console.log(step)
                    setSetpImg(data.stepImg)
                    console.log(stepImg)
    
                } else {
                    console.error('未找到匹配的食谱');
                }
            } catch (error) {
                console.error('获取食谱详细信息时出错:', error);
            }
        };

        fetchRecipeDetails();
    }, [foodname]);

    return (
        <>
            <div className={A.top}>
                <div className={A.top_left}>
                    <img src={`http://localhost:3001/images/${foodimage}`} className={A.top_left_img} alt="" />
                </div>
                <div className={A.top_center}>
                    <div className={A.top_center_title}> {foodname}</div>
                    <div className={A.top_center_shoucang}>
                        <span>{shoucang}收藏</span><span style={{ marginLeft: '1rem' }}>{liulan}浏览</span>
                    </div>
                    <div className={A.top_center_symbol}>
                        <div className={A.center_item}>
                            <div className={A.center_item_symbol}>
                                <svg className={A.icon_zhengzhu} aria-hidden="true">
                                    <use xlinkHref="#icon-zhengzhu"></use>
                                </svg>
                            </div>
                            <div>
                                <div className={A.center_item_text}>工艺</div>
                                <div className={A.center_item_content}>{gongyi}</div>
                            </div>
                        </div>

                        <div className={A.center_item}>
                            <div className={A.center_item_symbol}>
                                <svg className={A.icon_zhengzhu} aria-hidden="true">
                                    <use xlinkHref="#icon-tiaoliaozhip"></use>
                                </svg>
                            </div>
                            <div>
                                <div className={A.center_item_text}>口味</div>
                                <div className={A.center_item_content}>{kouwei}</div>
                            </div>
                        </div>

                        <div className={A.center_item}>
                            <div className={A.center_item_symbol}>
                                <svg className={A.icon_zhengzhu} aria-hidden="true">
                                    <use xlinkHref="#icon-shizhong1"></use>
                                </svg>
                            </div>
                            <div>
                                <div className={A.center_item_text}>时间</div>
                                <div className={A.center_item_content}>{time}</div>
                            </div>
                        </div>

                        <div className={A.center_item}>
                            <div className={A.center_item_symbol}>
                                <svg className={A.icon_zhengzhu} aria-hidden="true">
                                    <use xlinkHref="#icon-chushimao"></use>
                                </svg>
                            </div>
                            <div>
                                <div className={A.center_item_text}>难度</div>
                                <div className={A.center_item_content}>{difficult}</div>
                            </div>
                        </div>

                        <div className={A.center_item}>
                            <div className={A.center_item_symbol}>
                                <svg className={A.icon_zhengzhu} aria-hidden="true">
                                    <use xlinkHref="#icon-reliang3"></use>
                                </svg>
                            </div>
                            <div>
                                <div className={A.center_item_text}>总热量(kcal)</div>
                                <div className={A.center_item_content}>{cal}</div>
                            </div>
                        </div>
                    </div>
                    <div className={A.zhuliao}>
                        <div className={A.zhuliao_title}>
                            <div className={A.zhuliao_title_text}>主料</div>
                            <div className={A.ying}>main</div>
                        </div>
                        <div>
                            <div className={A.zhuliao_content}>
                                {mainmaterials.map((item, index) => (
                                    <div key={index} className={A.zhuliao_item}>{item.main_name}</div>
                                ))}
                            </div>
                        </div>
                    </div>

                    <div className={A.fuliao}>
                        <div className={A.fuliao_title}>
                            <div className={A.fuliao_title_text}>辅料</div>
                            <div className={A.ying}>main</div>
                        </div>
                        <div>
                            <div className={A.fuliao_content}>
                                {othermaterial.map((item, index) => (
                                    <div key={index} className={A.fuliao_item}>{item.others_name}</div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
                <div className={A.top_right}>
                    <div className={A.top_right_top}>
                        <div>
                            <div className={A.tips_title}>技巧tips:</div>
                            <div style={{marginLeft:'1rem',marginRight:'1rem'}}>{tips}</div>
                            {/* <div className={A.tips_text}>1.笋要挑选嫩的</div>
                            <div className={A.tips_text}>2.笋汆烫可以去苦味</div>
                            <div className={A.tips_text}>3.不吃辣椒的可以不放辣椒</div> */}
                        </div>
                        <div>
                            <button className={A.button}>点我收藏</button>
                        </div>
                    </div>
                    <div className={A.top_right_bottom}>
                        <span>创建时间:</span>
                        <span>2024-5-24</span>
                        <div className={A.top_right_bottom_text}>{foodname}的版权归作者所有，没有作者本人的书面许可任何人不得转载或使用其中整体或任何部分内容。</div>
                    </div>
                </div>
            </div>
            <div className={A.bottom}>
                <div className={A.bottom_center}>
                    <div className={A.bottom_title}>{foodname}的做法</div>
                    <div className={A.bottom_content}>
                        {step.map((step, index) => (
                            <div className={A.step_one} key={index}>
                                <div className={A.step_container}>
                                    <div className={A.step_number}>
                                        <div style={{ marginLeft: '1.5rem' }}>
                                            <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>步骤</div>
                                            <div style={{ fontSize: '13px', marginLeft: '15px' }}>step</div>
                                            <div style={{ fontSize: '2.8rem', fontWeight: 'bold', marginLeft: '1.4rem', marginTop: '1rem' }}> {index + 1} </div>
                                        </div>
                                    </div>
                                    <img src={`http://localhost:3001/images/${stepImg[index].step_img}`} alt={`Step ${index + 1}`} className={A.step_image} />
                                </div>
                                <p style={{width:'660px', fontSize: '1.4rem', marginLeft: '10.5rem', marginTop: '1rem', fontWeight: 'bold' }}>{step.step}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}

export default Details;
